<template>
  <div class="app-container">
    <el-calendar v-model="myMonth" v-loading="loading">
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template
        slot="dateCell"
        slot-scope="{date, data}"
      >
        <div v-if="showVolName(data.day)" style="height:70px;">
          <el-popconfirm title="确定改期停刊吗？" style="float:right" @onConfirm="stopVol(data.day)">
            <el-button slot="reference" size="small" icon="el-icon-delete" type="danger">停刊</el-button>
          </el-popconfirm>
          <div style="font-weight:bolder;color:blue;line-height:150%" v-html="data.day+'<br>第'+formatYear(showVolName(data.day))+'期'" />
        </div>
        <div v-else>{{ data.day }}</div>
      </template>
    </el-calendar>
  </div>
</template>

<script>
import qs from 'qs'

export default {
  name: 'ArticleList',
  data() {
    return {
      monthVolList: [],
      myMonth: '',
      loading: false
    }
  },
  watch: {
    myMonth: {
      handler(val) {
        this.getVolsByDate()
      },
      immediate: true
    }
  },
  mounted() {
    this.getVolsByDate()
  },
  methods: {
    stopVol(date) {
      const item = this.monthVolList.find(item => item.pubdate === date)
      if (item) {
        this.loading = true
        this.$http
          .get('/api/busVol/updateStopVol?' + qs.stringify({ id: item.id }))
          .then(response => {
            this.loading = false
            if (response.data.success === true) {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.getVolsByDate()
            } else {
              this.$message({
                message: '操作失败:' + response.data.message,
                type: 'error'
              })
            }
          })
          .catch(error => {
            this.loading = false
            console.log(error)
          })
      }
    },
    showVolName(date) {
      const item = this.monthVolList.find(item => item.pubdate === date)
      if (item) {
        const year = new Date(item.pubdate).getFullYear()
        let volname = parseInt(item.name)
        volname = (year - 2000) * 1000 + volname
        return volname
      }
    },
    formatYear(str) {
      const year = parseInt('20' + str.toString().substring(0, 2))
      const nowYear = new Date().getFullYear()
      if (year === nowYear) {
        return parseInt(str.toString().substring(2, 5))
      } else {
        return str
      }
    },
    getVolsByDate() {
      const myDate = this.myMonth || new Date()
      const month = myDate.getMonth() + 1
      const year = myDate.getFullYear()
      this.loading = true
      this.$http
        .get('/api/busVol/getVolByDate?year=' + year + '&month=' + month)
        .then(response => {
          this.loading = false
          if (response.data.success === true) {
            this.monthVolList = response.data.result
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          this.loading = false
          console.log(error)
        })
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
<style>
.inputtable{
  background:#ccc;
  line-height: 150%;
}
</style>
